import React, { useState, useEffect } from 'react';
import ProLayout, { PageContainer } from '@ant-design/pro-layout';
import { message } from 'antd';
import { IRouteComponentProps, Link } from 'umi';
import { Local } from '@/utils/cache';
import copy from 'copy-to-clipboard';
import { menuDataModel } from './layout_view_model';
import { reaction } from 'mobx';
import './style/basic_layout.less';

// 接口返回的类型
interface MenuItemModel {
  id: number;
  parent_id: number;
  menu_name: string;
  menu_path: string;
  icon?: string;
  children?: Array<MenuItemModel>;
}

export default (props: IRouteComponentProps) => {
  const [index, setIndex] = useState(0);
  const [loading, setLoading] = useState(false);
  useEffect(() => {
    menuDataModel.updateMenuData();
  }, [index]);

  // 复制Token
  const copyToken = () => {
    copy(Local.token!);
    message.success('复制成功');
  };

  reaction(
    () => menuDataModel.loading,
    (arg, prev) => {
      setLoading(arg);
    },
  );

  return (
    <div>
      <ProLayout
        title="管理系统"
        menuDataRender={() => menuDataModel.layoutMenu}
        style={{ minHeight: '100vh' }}
        menu={{ loading: loading }}
        menuItemRender={(item, dom) => (
          <Link to={item.key || '/welcome'}>{dom}</Link>
        )}
        {...props}
      >
        <PageContainer content="欢迎使用">{props.children}</PageContainer>
      </ProLayout>
    </div>
  );
};
